<template>

  <Card class="ll cpyszjy-page page-fill" style="height:800px">
    <div>产品映射资金源</div>
    <div style="width:600px;margin:30px auto">
      <Row type="flex" align="middle">
        <Col span="8">产品大类:</Col>
        <Col span="14">
        <Select v-model="productType" label-in-value style="width:200px" :disabled="allMark" @on-change="productTypeCheck">
          <Option v-for="item in productTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">版本:</Col>
        <Col span="16">
        <Input v-model="version" placeholder="请输入" disabled style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">资金源:</Col>
        <Col span="16">
        <Select v-model="fund" label-in-value style="width:200px" :disabled="allMark" @on-change="fundCheck">
          <Option v-for="item in fundList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">状态:</Col>
        <Col span="16">
        <Select v-model="status" style="width:200px" :disabled="allMark">
          <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">优先级:</Col>
        <Col span="16">
        <Input v-model="prior" placeholder="请输入" style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">资金年化利率:</Col>
        <Col span="16">
        <Input v-model="rate" placeholder="请输入" style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">产品细类:</Col>
        <Col span="16">
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:20px">
        <Col span="8">
        <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
        </Col>
        <Col span="16">
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">

        <Col span="24">
        <CheckboxGroup v-model="productValueList" :disabled="allMark" @on-change="checkAllGroupChange">
          <Checkbox style="margin-top:10px" :disabled="allMark" v-for="item in productList" :key="item.productCode" :label='item.productCode+":"+item.productName'>{{item.productName}}</Checkbox>
        </CheckboxGroup>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="margin-top:30px">
        <Col span="12" style="text-align:center">
        <Button type="primary" @click="conf" size="small" :disabled="allMark">确认</Button>
        </Col>
        <Col span="12">
        <Button type="primary" @click="reback" size="small">返回</Button>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>

export default {
  data () {
    return {
      indeterminate: true,
      checkAll: false,
      productCodeList: [],
      allMark: false,
      mark: '',
      productType: '',
      productTypeName: '',
      productTypeList: [],
      version: '',
      fund: '',
      fundName: '',
      fundList: [],
      status: '',
      statusList: [
        {
          value: '0',
          label: '正常'
        },
        {
          value: '1',
          label: '异常'
        }
      ],
      prior: '',
      rate: '',
      productValueList: [],
      productList: []
    }
  },
  created () {
    var vm = this
    this.$ajax = this.$util.ajax()
    // 产品大类查询
    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProduct', {}).then(re => {
      var allData = re.data.data
      for (var i = 0; i < allData.length; i++) {
        vm.productTypeList.push({
          value: allData[i].productType,
          label: allData[i].productTypeName
        })
      }
    })

    // 获取所有资金源
    this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/service/list', {})
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.fundList.push({
            value: allData[i].fundCode,
            label: allData[i].fundName
          })
        }
      })
      .catch(er => { })
  },
  methods: {
    reback () {
      var vm = this
      vm.$router.push('productFund')
    },
    productTypeCheck (data) {
      var vm = this
      vm.productType = data.value
      vm.productTypeName = data.label
      vm.productList = []
      vm.productCodeList = []
      // 查询生效版本
      vm.version = ''
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProductVersion', {
        productType: vm.productType.split('-')[0],
        isValid: '0'
      })
        .then(re => {
          vm.version = re.data.data[0].productVersion
          this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByVersion', {
            productType: vm.productType.split('-')[0],
            productVersion: vm.version
          })
            .then(re => {
              vm.productList = re.data.data
              for (var i = 0; i < re.data.data.length; i++) {
                vm.productCodeList.push(re.data.data[i].productCode + ':' + re.data.data[i].productName)
              }
            })
            .catch(er => { })
        })
        .catch(er => { })
    },
    fundCheck (data) {
      var vm = this
      vm.fund = data.value
      vm.fundName = data.label
    },

    // 全选
    handleCheckAll () {
      var vm = this
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false

      if (this.checkAll) {
        this.productValueList = vm.productCodeList
      } else {
        this.productValueList = []
      }
    },
    checkAllGroupChange (data) {
      var vm = this
      if (data.length === vm.productCodeList.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    },
    // 确认提交
    conf () {
      var vm = this
      if (vm.productType.trim() === '') {
        this.$Message.warning('请选择产品大类')
        return
      }
      if (vm.version.trim() === '') {
        this.$Message.warning('版本不能为空')
        return
      }
      // if (vm.fund === "") {
      //   this.$alert({ title: "提示", content: "请选择资金源" });
      //   return;
      // }
      if (vm.status.trim() === '') {
        this.$Message.warning('请选择状态')
        return
      }
      if (vm.prior.trim() === '') {
        this.$Message.warning('请输入优先级')
        return
      }
      if (vm.rate.trim() === '') {
        this.$Message.warning('请输入年利率')
        return
      }
      if (vm.productValueList.length === 0) {
        this.$Message.warning('请选择产品细类')
        return
      }
      var r = /^\+?[1-9][0-9]*$/
      if (!r.test((vm.prior + '').trim()) && (vm.prior + '') !== '' && vm.prior !== undefined) {
        vm.$Message.warning('优先级格式不正确')
        return
      }
      var productValueList = []
      for (var i = 0; i < vm.productValueList.length; i++) {
        productValueList.push({
          productName: vm.productValueList[i].split(':')[1],
          productCode: vm.productValueList[i].split(':')[0]
        })
      }
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/saveProductAndFund', {
        productType: vm.productType,
        productTypeName: vm.productTypeName,
        productVersion: vm.version,
        fundCode: vm.fund,
        fundName: vm.fundName,
        status: vm.status,
        level: vm.prior,
        rate: vm.rate,
        productValueList: productValueList
      })
        .then(re => {
          if (re.data.code === 'success') {
            this.$Message.success(re.data.data)
            this.$router.push('productFund')
          } else {
            this.$Message.error(re.data.data)
          }
        })
        .catch(er => { })
    }
  }
}
</script>

<style lang="less">
.cpyszjy-page {
  .ll {
  }
  #middle {
    margin: 100px auto;
    width: 500px;
  }
  #middle .v-form-label {
    font-size: 15px;
  }
  #middle .versionNum {
    width: 80px;
  }
  #middle .channel {
    font-size: 12px;
  }
  .bt {
    margin: 10px 71px;
  }
  .check {
    display: inline-block;
  }
  .termRange {
    margin-right: 20px;
  }
  .v-tag {
    padding: 6px 10px;
    min-width: 10px;
  }
  #tagContainer {
    margin-top: 10px;
  }
  .middiv {
    display: inline-block;
    width: 118px;
  }
  .v-checkbox {
    margin: 15px 20px 6px 15px;
    display: inline-block;
  }
}
</style>
